<template>
    <div>
        <a-modal  v-model:visible="ruleVisible" :width="600" :zIndex="9999999" :footer="null">
            <template #title>
                <div class="title">{{ labelName }}规则</div>
            </template>
            <div class="table-content hide-scroller-bar">
                <a-table :columns="columns" :data-source="list" sticky bordered :pagination="false">
                    <template #bodyCell="{ column, record }">
                        <template v-if="column.key === 'desc'">
                            {{ record.desc ? record.desc : '--' }}
                        </template>
                    </template>
                </a-table>
            </div>
        </a-modal>
    </div>
</template>
<script setup>
 import { ref, watch } from 'vue';
 import { useVModel } from '@vueuse/core'
 import request from '@/common/utils/request';
 const props = defineProps({
     visible: {
         type: Boolean,
         default: false
     },
     labelName: {
         type: String,
         default: '积分'
     }
 })
 let list = ref([])
 const columns = [
    {
      title: "功能",
      align: "left",
     
      dataIndex: "label",
      key: 'label',
    },
    {
      title: "消耗",
      align: "left",
      dataIndex: "value",
      key: 'value',
    },
    {
      title: "描述",
      align: "left",
      dataIndex: "desc",
      key: 'desc',

    },
    ]
 const emit = defineEmits(['update:visible'])
 const ruleVisible = useVModel(props, 'visible', emit)

 const getRuleList = () => {
    request
        .get("/work_ai", "/user/consume/consumptionPoint/rule", {
            isShotStack:1
      })
      .then((res) => {
        console.log(res);
        
        list.value = res.result.content
      }) 
 }
 watch(() => props.visible, () => {
    if (props.visible) {
        getRuleList()
    }
 })
</script>
<style lang="less" scoped>
.title{
    display: flex;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 20px;
}    
.table-content {
    height: 600px;
    overflow: hidden auto;
}
</style>